<html window-frame="solid" window-resizable>
<head>
  <title>Resizeable dialog</title>
  <style>
    html 
    { 
      font:system;
      min-width:min-content;  /* content will not overflow, no scrollbars */
      max-width:100%;         /* max width - whole screen */
      width:300dip;           /* preferred/initial width */
      height:240dip;          /* content will not overflow, no vertical scrollbars on the window */  
      min-height:min-content; 
      max-height: 70%;        /* 70% of screen height */
      overflow:none;
      padding:0;
      background-color:gold;
    }
    
    window-button  { display:inline-block; size: 19dip; outline-color:red; behavior:clickable; clear:after;}
    window-caption { display:block; flow:text; width:*; font:system; padding: 4dip 8dip; }
    window-button#window-close { 
        background-color:#dbb7ab; color:white;
        background-image: url(path:M22.245,4.015c0.313,0.313,0.313,0.826,0,1.139l-6.276,6.27c-0.313,0.312-0.313,0.826,0,1.14l6.273,6.272 
                                   c0.313,0.313,0.313,0.826,0,1.14l-2.285,2.277c-0.314,0.312-0.828,0.312-1.142,0l-6.271-6.271c-0.313-0.313-0.828-0.313-1.141,0
                                   l-6.276,6.267c-0.313,0.313-0.828,0.313-1.141,0l-2.282-2.28c-0.313-0.313-0.313-0.826,0-1.14l6.278-6.269
                                   c0.313-0.312,0.313-0.826,0-1.14L1.709,5.147c-0.314-0.313-0.314-0.827,0-1.14l2.284-2.278C4.308,1.417,4.821,1.417,5.135,1.73
                                   L11.405,8c0.314,0.314,0.828,0.314,1.141,0.001l6.276-6.267c0.312-0.312,0.826-0.312,1.141,0L22.245,4.015z);
        background-size: 13dip;
        background-position: 50% 50%;
        background-repeat:no-repeat;
        fill: #fff;
        transition: outline linear 200ms, background-color linear 200ms;
    }
    
    window-button#window-close:hover { 
      background-color:red; 
      outline:5px glow red -1px; 
    }
        
    body { 
      padding:0; margin:4px; 
      flow: grid(2 1, 
                 3 3);
    }
    
    @media platform == "Windows" {
      body { 
        flow: grid(1 2, 
                   3 3);
      }
    }
    
    
    html > body > section { size:*; }
    
    h1, p { text-align:center; }

    #content { flow:horizontal; size:*; }   
    #content > picture { display:block; size:auto; margin:6dip; }
    #content > textarea { display:block; size:*; min-width:16em; min-height:6em; }   
    
  </style>
  <script type="text/tiscript">
   
    event click $(#close-dialog) { view.close( $(textarea).value ) }
    event click $(#cancel-dialog) { view.close( null ); }

    function self.ready() {
      $(textarea).state.focus = true; 
    }

    </script>
</head>
<body>
  <window-caption role="window-caption">Resizeable dialog</window-caption>
  <window-button #window-close role="window-close"></window-button>
  <section>
    <p>Try to resize the window</p>
    <div #content>
      <picture src="../user-login-48.png" />
      <textarea novalue="Paste your PGP public key here"></textarea>
    </div>
    <p>
      <button id="close-dialog">Ok</button>
      <button id="cancel-dialog" tabindex=1 >Cancel</button>
    </p>
  </section>  
</body>
</html>